import React from 'react';

interface BookmarkButtonProps {
  paragraphIndex: number;
  isBookmarked: boolean;
  onToggle: (index: number) => void;
}

export const BookmarkButton: React.FC<BookmarkButtonProps> = ({ 
  paragraphIndex, 
  isBookmarked, 
  onToggle 
}) => {
  return (
    <button
      onClick={() => onToggle(paragraphIndex)}
      className="p-1 hover:bg-gray-100 rounded"
      title={isBookmarked ? "移除书签" : "添加书签"}
    >
      <svg
        className={`w-5 h-5 ${isBookmarked ? 'text-yellow-500' : 'text-gray-400'}`}
        fill="currentColor"
        viewBox="0 0 20 20"
      >
        <path d="M5 4a2 2 0 012-2h6a2 2 0 012 2v14l-5-2.5L5 18V4z" />
      </svg>
    </button>
  );
}; 